<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码找回</title>
    <script language="javascript" type="text/javascript" src="vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="elementUI/elementUI2.x.js"></script>
    <!--    <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>找回密码</span>
        </div>
        <div class="text item">
            <el-form label-width="100px">
                <el-form-item label="用户账号" prop="mail">
                    <el-input type="text" v-model="mail" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input type="text" v-model="code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pwd">
                    <el-input type="text" v-model="pwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getCode">获取验证码</el-button>
                    <el-button type="primary" @click="updatePwd">确认修改</el-button>
                 </el-form-item>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mail:'',
            code: '',
            pwd: '',
        },
        methods: {
            getCode: function(){
                if(this.mail!==""){
                    const loading = vm.$loading({
                        lock: true,
                        text: '正在获取验证码，请前往邮箱查看...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    var formdata = new FormData();
                    formdata.append("user_mail", this.mail);
                    axios.post('/getCode',formdata).then(function (resp) {
                        console.log(resp)
                        console.log(resp.data)
                        if(resp.data=="OK") {
                            loading.close();
                            vm.$message({
                                message: '发送完成',
                                type: 'success'
                            });
                        }else {
                            vm.$message({
                                message: '出错了，邮件发送失败',
                                type: 'error'
                            });
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                }else {
                    vm.$message({
                        message: '请输入账户',
                        type: 'warning'
                    });
                }
            },
            updatePwd: function () {
                if(this.mail!==""&&this.code!==""&&this.pwd!==""){
                    var formdata = new FormData();
                    formdata.append("mail", this.mail);
                    formdata.append("code", this.code);
                    formdata.append("pwd", this.pwd);
                    if (this.key !== '') {
                        axios.post('/findPwd', formdata).then(function (resp) {
                            console.log(resp.data)
                            if(resp.data==true) {
                                vm.$message({
                                    message: '密码已修改,2秒后返回登录',
                                    type: 'success'
                                });
                                setTimeout(function(){
                                    window.history.back();
                                },2000);
                            }else {
                                vm.$message({
                                    message: '密码修改失败',
                                    type: 'error'
                                });
                            }

                        }).catch(function (error) {
                            console.log(error);
                        })
                    }
                }else {
                    vm.$message({
                        message: '请输入完整的信息',
                        type: 'warning'
                    });
                }
            }
        }
    });
</script>
</body>
</html>
